<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Monitoring Reports</title>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript">
	function change_type(){
		var type = document.getElementById('type').value;
		switch(type){
			case "0":
				document.getElementById('day_area').display = true;
				document.getElementById('month_area').display = true;
				document.getElementById('year_area').display = true;
				break;
			case "1":	//by month
				document.getElementById('day_area').disabled = false;
				document.getElementById('month_area').disabled = true;
				document.getElementById('year_area').disabled = true;
				break;
			case "2":
				document.getElementById('day_area').disabled = false;
				document.getElementById('month_area').disabled = false;
				document.getElementById('year_area').disabled = true;
				break;
			default:
				break;
		};
	}
</script>
</head>
<body onload="populate_calendar(document.report_form);">
<div align="center"><h1>Select report creterias</h1></div>
<div align="center" style="width: 100%;">
	<form action="reports.php" method="post" name="report_form" id="report_form" >
	<div id="type_area" style="width: 50%;">
		<div align="right" style="width: 40%;padding-right: 10%; float: left;"><label>Site:</label></div>
		<div align="left" style="width: 50%; ">
			<select id="site" name="site">
				<?php
				?>
			</select>
		</div>
	</div>
	<div id="type_area" style="width: 50%;">
		<div align="right" style="width: 40%;padding-right: 10%; float: left;"><label>Type:</label></div>
		<div align="left" style="width: 50%; ">
			<select id="type" name="type" onchange="change_type();">
				<option value=0>By Day</option>
				<option value=1>By Month</option>
				<option value=2>By Year</option>
			</select>
		</div>
	</div>
	<div id="year_area" style="width: 50%;  margin-top: 1%;" >
		<div align="right" style="width: 40%; padding-right: 10%; float: left"><label for="year">Year: </label></div>
		<div align="left" style="width: 50%">
			<select id="year" name="year">
			</select>
		</div>
	</div>

	<div id="month_area" style="width: 50%;  margin-top: 1%;" >
		<div align="right" style="width: 40%; padding-right: 10%; float: left"><label for="month">Month: </label></div>
		<div align="left" style="width: 50%">
		<select id="month" name="month" onchange="populate_days(document.report_form);">
			<Option value=0>January</Option>
			<Option value=1>February</Option>
			<Option value=2>March</Option>
			<Option value=3>April</Option>
			<Option value=4>May</Option>
			<Option value=5>June</Option>
			<Option value=6>July</Option>
			<Option value=7>August</Option>
			<Option value=8>September</Option>
			<Option value=9>October</Option>
			<Option value=10>November</Option>
			<Option value=11>December</Option>
		</select>
		</div>
	</div>
	<div id="day_area" style="width: 50%; margin-top: 1%;" >
		<div align="right" style="width: 40%; padding-right: 10%; float: left"><label for="day">Day: </label></div>
		<div align="left" style="width: 50%"><select id="day" name="day"></select></div>
	</div>
	<div id="button_area" style="width: 50%; margin-top: 1%;">
		<input type="button" id="submit" name="submit" value="Show report" />
	</div>

	</form>
</div>
</body>
</html>